<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证插件</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <!--<script src="../js/messages_zh.min.js"></script>-->
    <!--<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>-->
    <!--<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>-->
    <!--<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>-->

    <style>
        body {
            font-family: 微软雅黑;
            font-size: 1.6em;
            background: #aad3ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }
        form textarea{
            max-width: 100%;
        }
        .highLight{
            background: #dfffb7;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>表单验证</h1>
    <hr>
    <br>
    <h3>欢迎注册</h3>
    <div class="row" >
            <div class="col-md-4 col-md-offset-4">
                <form action="" id="form">
                    <fieldset>
                        <legend>个人信息输入</legend>
                        <div class="form-group">
                            <label for="lastName">名字：</label>
                            <input class="form-control" id="lastName" >
                        </div>
                        <div class="form-group">
                            <label for="firstName">姓氏：</label>
                            <input class="form-control" id="firstName" >
                        </div>
                        <div class="form-group">
                            <label for="username">用户名：</label>
                            <input class="form-control" id="username" name="username" type="text" value="">
                        </div>
                        <div class="form-group">
                            <label for="password">密码：</label>
                            <input class="form-control" id="password" name="password" type="password" value="1223">
                        </div>
                        <div class="form-group">
                            <label for="password2">验证密码：</label>
                            <input class="form-control" type="password" name="password2" id="password2" value="1223">
                        </div>
                        <div class="form-group">
                            <label for="email">电子邮件：</label>
                            <input class="form-control" type="email" id="email" name="email" value="daoke_li@qq.com">
                        </div>
                        <div class="form-group">
                            <label for="url">个人网站：</label>
                            <input class="form-control" type="url" id="url" name="url" value="http://e-art.taobao.com">
                        </div>
                        <div class="form-group">
                            <label for="date">入职时间：</label>
                            <input class="form-control" type="date" id="date" name="date" value="">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄：</label>
                            <input class="form-control" type="number" id="age" name="age" value="">
                        </div>
                        <div class="form-group">
                            <label>请同意我们的声明：
                            <input type="checkbox" id="agree" name="agree"></label>
                        </div>
                        <div class="form-group">
                            <h4>请选择两或三位客服进行跟踪服务：<input type="checkbox" id="server"></h4>
                            <label hidden> 客服薇薇 <input type="checkbox" id="server1" name="server"></label>
                            <label hidden> 客服小红 <input type="checkbox" id="server2" name="server"></label>
                            <label hidden> 客服小兰 <input type="checkbox" id="server3" name="server"></label>
                            <label hidden> 客服大侠 <input type="checkbox" id="server4" name="server"></label>
                            <label hidden> 客服大神 <input type="checkbox" id="server5" name="server"></label>
                            <label hidden> 客服大盗 <input type="checkbox" id="server6" name="server"></label>
                        </div>
                        <div class="form-group">
                            <label for="info">自我介绍：</label>
                            <textarea class="form-control" id="info"></textarea>
                        </div>
                        <div class="form-group">
                            <input id="sub" type="submit" value="提交">
                        </div>
                    </fieldset>
                </form>
            </div>

    </div>
    <div style="height: 500px"></div><!---->
</div>
<script>
    $.validator.setDefaults({
        submitHandler: function() {
            alert("提交事件!");
        }
    });
$(function() {

    $("form :input").focus(function () {
        $(this).addClass("highLight");
    }).blur(function () {
        $(this).removeClass("highLight");
    });

    $("#server").click(function () {
        $(this).parent().parent().find("label").toggle();
    });


    $("form").click(function () {
        $("#form").validate({
//            debug:true,

            //冒号前面的名称对应的是表单中input的name，而不是id.
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    rangelength: [4, 10]
                },
                password2: {
                    required: true,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                url: {
//                    required:true,//不加required但验证，则说明是要么不写，要么必须写正确
                    url: true
                },
                date: {
//                    required:true,
                    date: true
                },
                age: {
                    number: true,
                    digits: true,//整数
                    range: [18, 70]
                },
                server: {
                    rangelength: [2, 3]
                },
                agree: "required"
            },
            messages: {
                firstname: "请输入您的名字",
                lastname: "请输入您的姓氏",
                username: {
                    required: "请输入用户名!",
                    minlength: "用户名不能少于2个字!"
                },
                password: {
                    required: "请输入密码!",
                    minlength: "密码长度必须是4到10位!"
                },
                password2: {
                    required: "请再次输入密码!",
                    equalTo: "两次密码输入不一致!"
                },
                email: {
                    required: "请填写电子邮箱！",
                    email: "请输入正确的格式！"
                },
                url: {
                    required: "请填写网站地址！",
                    url: "请输入正确的网址！"
                },
                age: {
                    number: "只能填数字!",
                    digits: "必须是整数！",
                    range: "年龄必须是18岁~70岁之间"
                },
                agree: "请同意我们的声明",
                server: {
                    rangelength: "你只能选2或3位客服"
                }
            }
//            onsubmit:false,
//            onkeyup:true
        });
    })/*.blur(function(){//得到时触发
        $(this).triggerHandler("click");
    }).focus(function() {
        $(this).triggerHandler("click")
    })*/
})
//这里遇到了一些问题,总结到的规律是：
    // 1，不能像jQuery原生语言一样使用模拟事件来触发验证，包括即时的focus、blur和keyup；
    //2，当某个文本框有输入然后再失焦时才能触发验证；
    //3，开始某个输入框的验证后，再次填充内容时才会触发keyup事件。
</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>